//充币
<template>
  <div class="coin-in">
    
     <b-container class="user_coinin_chosen" >
       
            <div class="deyi">{{coinType}}充币</div>
            <span style="float: right;margin-right: 30px; margin-top: -23px;" v-on:click="tanchuan"><img src="../../assets/img/images/guan_bi.png" alt=""></span>
      
      <!--<b-row>
        <!- 币种选择 -->
        <!-- <b-col lg="12" class="coinin_chosen">
          <span>{{$t('u_bzxz')}}：</span>
          <ul>
            <li class="chosen-item" :class="isActive == index ? 'active' : ''" @click="coinSelect(index)" v-for="(list,index) in coinTypes" :key="index">{{list.coinType}}</li>
          </ul>
        </b-col> 
      </b-row> -->
      <!--二维码-->
      <div style="margin:30px;"> 
       
        <div  class="pay-address" v-if="!coin_hkt">
          <div>
            <span style="display: block;text-align: left;font-family: PingFangSC-Medium;font-size: 16px;color: #99A7C8;letter-spacing: 0; line-height:30px;">
              {{coinType}}{{$t('u_qbdz')}}：</span>
            <textarea class="textarea" readonly="readonly" id="copy" rows="1" style="" >{{ coinCode }}</textarea>
            <div class="pay-address-btnn" @click="copy()">{{$t('u_fzqbdz')}}</div>
          </div>
        <!-- <b-row >
                    <b-col  class="input-item">
                        <div class="item-name">{{$t('chongbibeizhu')}}</div>
                        <b-input v-model="remark" class="item-val" :placeholder="$t('u_qsrbz')"></b-input>
                    </b-col>
        </b-row> -->
        </div>

        <div  class="pay-address" v-else>
          <div class="hkt-text">1. 1HKT=1港币</div>
          <div class="hkt-text">2. 入金手续费3%</div>
          <div class="hkt-text">3. 入金金额大于5000 请加官方客服 best-lxmy7</div>
        </div>

         <div  class="qrcode">
          <div id="qrs"></div>
          <div class="pay-msg" v-if="coin_hkt">请使用支付宝扫描支付</div>
        </div>
      </div>
      
      <div class="jian_jie">
          <p>{{$t('t_tishi_1')}}</p><br>
          <p>{{$t('t_tishi_2')}}{{coinType}}{{$t('t_tishi_21')}}</p><br>
          <p>{{$t('t_tishi_3')}}</p><br>
          <p>{{$t('t_tishi_4')}}</p>
      </div>
    </b-container>
  

  </div>
</template>

<script>
import { mapActions } from "vuex";
import QRCode from "qrcodejs2";
import { dateFormat } from "../../assets/js/common.js";
import zhanwei from "../../assets/img/zhanwei.jpg";
import mixins from "../../assets/js/mixin";
export default {
  props:["message"],
  mixins: [mixins],
  data() {
    return {
      qrcode: null,
      coinCode: "",//钱包地址
      coinType: "",//币种
      opType: 1,
      isActive: 0,
      coinTypes: [],
      currentPage: 1,
      coinTypeIndex: "",
      rows: 5,
      fields: [
        { key: "createTm", label: this.$t("u_sj") },
        { key: "address", label: this.$t("u_zrqbdz") },
        { key: "value", label: this.$t("u_zrsl") },
        { key: "comfirmCount", label: this.$t("u_qrcs") },
        { key: "status", label: this.$t("u_zt") },
        { key: "remark", label: this.$t("u_beiz") },
        { key: "txid", label: this.$t("u_jlid") }
      ],
      items: [],
      total: 0,
      coinType_query: "",

      amount: "",   //充值金额

      coin_hkt: false,  // 是否是 hkt

      checkOrderTimer: null,
      checkOrderTimerNum: 0,
    };
  },
  methods: {
    tanchuan(){
          this.$emit('child-say')
      },
    rechagerCoinAddresss: function () {
      var _self = this;
      this.ifLoadingChange(true);
      _self.$http
        .get(_self.service + "/coin/user/rechager/address", {
          params: {
            coinType: _self.coinType
          }
        })
        .then(function (res) {
          if (res.data.code == "001") {
            _self.coinCode = res.data.result.data;
            _self.initQr(_self.coinCode);
          } else {
            _self.coinCode = "";
            $("#qrs")
              .find("img")
              .attr("src", zhanwei);
            $("#qrs").attr("title", "");
          }
        });
    },
    //分页
    pageList: function (page) {
      this.getUserWithdrawHis(page);
    },
    //复制
    copy: function () {
      var code = document.getElementById("copy");
      code.select();
      document.execCommand("Copy");
      this.$swal("复制成功",{
					icon:'/static/img/dagou.png'
				});
    },
    initQr: function (url) {
      if (this.qrcode) {
        this.qrcode.clear(); // 清除代码
        this.qrcode.makeCode(url); // 生成另外一个二维码
      } else {
        this.qrcode = new QRCode("qrs", {
          text: url,
          width: 128,
          height: 128,
          colorDark: "#000000",
          colorLight: "#ffffff",
          correctLevel: QRCode.CorrectLevel.H
        });
      }
    },
    getIndex(data) {
      let index = 0;
      for (let i in data) {
        if (this.coinType_query == data[i].coinType) {
          index = i;
        }
      }
      return index || 0;
    },
    showTxid(id) {
      this.$swal(id,{
					icon:'/static/img/tan_chuang.png'
				});
    },
    filterCoinList(data) {
      let newData = [];
      for (const i in data) {
        if (data[i].operateStatus == "1" || data[i].operateStatus == "2") {
          newData.push({
            coinName: data[i].coinName,
            coinType: data[i].coinType,
            moneyType: data[i].moneyType,
            operateStatus: data[i].operateStatus,
            status: data[i].status
          });
        }
      }
      if (newData.length <= 0) {
        return null;
      }
      return newData;
    },
    parseCoinList(data) {
      let coinList = new Map();
      let arr = [];
      for (const i in data) {
        for (const j in data[i].coinList) {
          if (data[i].coinList[j].operateStatus == "1" || data[i].coinList[j].operateStatus == "2") {
            coinList.set(data[i].coinList[j].coinType, data[i].coinList[j]);
          }
        }
      }
      coinList.forEach(function (value, key) {
        arr.push(value)
      });
      return arr;
    },
    ...mapActions(["coinTabActiveChange", "ifLoadingChange"])
  },
  created() {
    this.coinType = this.message
    console.log("cc"+this.message)
    // this.exists(); // 验证是否绑定手机
    // this.coinType_query = this.$route.query.coinType || "";//币种
    this.coinType_query = this.message || "";//币种
    // this.coinList();
    // this.getUserWithdrawHis(1);
    this.coinTabActiveChange(0);
    if(this.coinType_query == "HKT"){
      this.coin_hkt = true;
    }
    // this.coinSelect()
    console.log(this.chuan_di_zhi)
    this.rechagerCoinAddresss()
  }
};
</script>

<style lang="scss" >
/*.textarea{
    display: block;
    border: none;
    resize:none;
    background: transparent;
    width: 80%;
    overflow: hidden;
    text-overflow:ellipsis;
    font-family: PingFangSC-Medium;
    font-size: 16px;
    color: #1F3F87;
    letter-spacing: 0;
    line-height:30px;
}*/
.textarea{
  display: block;
  border: none;
  resize:none;
  background: transparent;
  width: 80%;
  font-family: PingFangSC-Medium;
  font-size: 16px;
  color: #1F3F87;
  word-wrap: break-word;
}
.jian_jie{
    margin:30px 20px;
    p{  
        display: block;
        ont-family: PingFangSC-Medium;
        font-size: 14px;
        color: #99A7C8;
        letter-spacing: 0;
    }
}
.deyi{
    font-family: PingFangSC-Medium;
    font-size: 24px;
    color: #1F3F87;
    letter-spacing: 0;
    margin-left:30px;
    margin-top:30px;
}
.hkt-text {
  font-size: 16px;
  color: #333;
  line-height: 24px;
}
.pay-msg {
  text-align: center;
  font-size: 16px;
  line-height: 26px;
  color: #666;
}
.coin-in {
  padding-top: 5rem;
  min-height: 600px;
  .user_coinin_chosen {
    background: #f8f8f8;
    border: 1px solid #eee;
    // min-height: 345px;
    // height: 684px;
    margin-bottom: 30px;
    width:528px!important
  }
  .in-table {
    width: 100%;
    overflow: auto;
  }
  .in-table table {
    width: 100%;
    min-width: 850px;
    // border-top: 1px #eee solid;
  }
  .in-table table tr{
    border-bottom: 1px solid rgba(153,167,200,0.2);
  }
  .in-table tr:nth-child(1) th{
    font-family: PingFangSC-Medium;
    font-size: 14px;
    color: #99A7C8;
    letter-spacing: 0;
  }
   .in-table tr th:nth-child(6){
     padding-right:0;
     text-align: right;
   }
  .in-table tr th,
  .in-table tr td {
    padding: 10px;
    // border-bottom: 1px #eee solid;
    font-weight: normal;
    font-size: 14px;
  }
  .in-table tr th,
  .in-table tr td {
    // border-bottom: 1px #eee solid;
  }
  .in-table tr td div {
    line-height: 20px;
  }
  .coinin_chosen {
    padding: 25px 10px;
    display: flex;
    span {
      width: 80px;
      line-height: 24px;
    }
    ul {
      flex: 1;
    }
    li {
      font-size: 14px;
      line-height: 24px;
      color: #333333;
      float: left;
    }
    .chosen-item {
      margin: 0 10px;
      padding: 0 10px;
      cursor: pointer;
      list-style: none;
      &:hover,
      &.active {
        color: #fff;
        background: #2d6df0;
        border-radius: 2px;
      }
    }
  }
  .qrcode {
    #qrs {
        border: 1px solid #99A7C8;
        border-radius: 4px;
        height: 260px;
        width: 260px;
        margin: 25px auto;
      }
    img {
      display: block;
      margin: 16px auto!important;
    //   width: 160px;
    // margin-top:25px;
      height: 228px;
      width:228px;
    }
  }
  .pay-address {
    p {
      margin-top: 23px;
      line-height: 24px;
      margin-bottom: 30px;
      font-size: 14px;
      color: #333;
      width: 100%;
      text-align: center;
    }
    .pay-address-btnn {
        float: right;
        margin-top: -29px;
        border-left: 1px solid #99A7C8;
        cursor: pointer;
        padding: 5px;
        padding-left: 10px;
        font-family: PingFangSC-Medium;
        font-size: 16px;
        color: #1F3F87;
        letter-spacing: 0;
    }
  }
  .chosen-line {
    width: 100%;
    height: 30px;
    border-bottom: 1px dashed #d2d2d2;
  }
  .chosen-tips-text {
    padding: 15px 15px;
    p {
      font-size: 12px;
      color: #999;
    }
  }
  .txid-btn {
    width: 60px;
    height: 30px;
    text-align: center;
    line-height: 30px !important;
    border-radius: 4px;
    background-color: #2d6df0;
    color: #ffffff;
    cursor: pointer;
  }
}

 .item-name {
      width: 80px;
      margin-right: 10px;
      line-height: 38px;
      font-family: PingFangSC-Medium;
    font-size: 16px;
    color: #1F3F87;
    letter-spacing: 0;
    text-align: left;
    }
.item-val {
      flex: 1;
      font-size: 14px;
      outline: none;
      box-shadow:none;

    }
</style>


